<template>
  <div class="myhome">
      <el-container>
        <el-header class="header">
          <div class="top-left">欧仕科技有限公司后台管理</div>
          <div class="top-right">
            <div class="closebox"><el-button type="primary" @click="goback">退出登录</el-button></div>
            <div class="username">管理员：<span>{{userName}}</span></div>
            <div class="useraccount">账号：<span>{{phone}}</span></div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
              <el-submenu index="1">
                <template slot="title"
                  ><i class="el-icon-message"></i>首页导航</template
                >
                <el-menu-item-group>
                  <template slot="title">首页</template>
                  <router-link :to="{ path: '/lunbo' }">
                    <el-menu-item index="1-1"> 轮播图 </el-menu-item>
                  </router-link>
                  <router-link :to="{ path: '/news' }">
                    <el-menu-item index="1-2"> 新闻资讯 </el-menu-item>
                  </router-link>
                  <router-link :to="{ path: '/product' }">
                    <el-menu-item index="1-3"> 产品中心 </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"
                  ><i class="el-icon-menu"></i>用户管理</template
                >
                <el-menu-item-group>
                  <template slot="title">用户</template>
                  <router-link :to="{ path: '/user' }">
                  <el-menu-item index="2-1">用户账户管理</el-menu-item>
                  </router-link>
                  <router-link :to="{ path: '/comments' }">
                  <el-menu-item index="2-2">留言</el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="2-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>

export default {
  name: "HomeView",
  // 内置守卫
  beforeRouteEnter(to,from,next) {
    if( localStorage.getItem('token') != null){
      next()
    }
    else{
      alert("管理员请先登录！")
      next('/login');
    }
  },
  data(){
    return{
      userName:"",
      phone:"",
    }
  },
  methods:{
    getdata(){
       // 获取本地存储的数据
      localStorage.getItem("phone");
      localStorage.getItem("userName");
      this.phone = localStorage.getItem("phone");
      this.userName = localStorage.getItem("userName");
    },
    goback() {
      localStorage.removeItem("token");
      localStorage.removeItem("phone");
      localStorage.removeItem("userName");
      localStorage.removeItem("id");
      this.$router.push({ path: "/login" });
    },
  },
  mounted(){
    this.getdata();
  }
};
</script>


<style lang="scss" scoped>
.myhome {
  .header {
    background-color: skyblue;
    display: flex;
    justify-content: space-between;
    height: 60px;
    .top-left {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 800;
    }
    .top-right {
      height: 60px;
      line-height: 30px;
      position: relative;
      .closebox {
        position: absolute;
        right:200px;
        top: 10px;
      }
    }
  }
  .aside {
    background-color: yellowgreen;
  }
  .main {
    background-color: #f0f0f0;
    height: 800px;
    .main-top {
      height: 20px;
      background-color: #fff;
    }
  }
}
</style>